<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-12 19:35:45
 * @LastEditors: 赵天利 5450026+zhaotianli01@user.noreply.gitee.com
 * @LastEditTime: 2024-01-18 12:00:19
4
ilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\AlarmManagement\components\safety\detail.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bg-white p-1">
    <custom-title :is-line="true" title="基本信息" />
    <div class="AlarmManagementDetail-base-info">
      <div v-for="(item, index) in descList" :key="index + 'base'">
        <custom-details-item v-if="item.module.includes(active)" :icon="item.icon" :label="item.label" one-color :value="item.value||'/'" />
      </div>
    </div>
    <template v-if="active === '视频报警'">
      <custom-title :is-line="true" title="报警视频" />
      <custom-player :camera-code="attachmentPath" :video-box-id="attachmentPath" />
    </template>
    <custom-title :is-line="true" title="处置信息" />
    <!-- <custom-timeline :list="timeList" /> -->
    <div class="alarmFlow-timeline">
      <custom-timeline :list="timeList" type="安全" :alarm-id="$route.query.id" :alarm-type="code[$route.query.active]" />
    </div>
  </div>
</template>
<script>
import customTimeline from '@/components/common/custom-timeline.vue'
import CustomPlayer from '@/components/common/custom-player.vue'
import { AqAlarmFlow, aqMonitorAlarmDetails, aqVideoAlarmDetails } from '@/api/commonPage/AlarmManagement'

export default {
  components: {
    customTimeline,
    CustomPlayer
  },
  inject: ['layout'],
  data() {
    return {
      active: this.$route.query.active,
      id: this.$route.query.id,
      descList: [
        { module: ['视频报警', '传感器报警'], field: 'companyName', label: '企业名称', icon: '&#xe725;', value: '/' },
        { module: ['视频报警', '传感器报警'], field: 'eventType', label: '报警类别', icon: '&#xe87e;', value: '/' },
        { module: ['视频报警', '传感器报警'], field: 'alarmLevel', label: '报警级别', icon: '&#xe696;', value: '/' },
        { module: ['视频报警', '传感器报警'], field: 'alarmTime', label: '报警时间', icon: '&#xe685;', value: '/' },
        { module: ['视频报警'], field: 'cameraName', label: '设备名称', icon: '&#xe685;', value: '/' },
        { module: ['传感器报警'], field: 'modelName', label: '设备名称', icon: '&#xe685;', value: '/' },
        { module: ['传感器报警'], field: 'modelType', label: '设备类型', icon: '&#xe685;', value: '/' },
        { module: ['视频报警'], field: 'riskLevel', label: '监控区域风险等级', icon: '&#xe685;', value: '/' },
        { module: ['视频报警', '传感器报警'], field: 'modelNumber', label: '设备编号', icon: '&#xe67a;', value: '/' },
        { module: ['传感器报警'], field: 'deviceWeiZhi', label: '安装位置', icon: '&#xe67a;', value: '/' },
        { module: ['视频报警', '传感器报警'], field: 'handleStatus', label: '是否生成处置任务', icon: '&#xe6b7;', value: '/' },
        { module: ['视频报警', '传感器报警'], field: 'falseAlarm', label: '是否误报', icon: '&#xe6b7;', value: '/' },
        { module: ['传感器报警'], field: 'monitorItem', label: '监测指标', icon: '&#xe6b7;', value: '/' },
        { module: ['传感器报警'], field: 'monitorItemValue', label: '报警发生时监测值', icon: '&#xe6b7;', value: '/' },
        { module: ['传感器报警'], field: 'ruleContent', label: '报警规则条件', icon: '&#xe6b7;', value: '/' },
        { module: ['视频报警'], field: 'linkman', label: '联系人', icon: '&#xe6b7;', value: '/' },
        { module: ['视频报警'], field: 'telephone', label: '联系电话', icon: '&#xe6b7;', value: '/' }
        // { field: 'monitorRegion', label: '监控区域', icon: '&#xe6aa;', value: '/' },
        // { field: 'monitoringPoints', label: '监控点', icon: '&#xe700;', value: '/' },
        // { field: 'productionLink', label: '生产环节', icon: '&#xe6b7;', value: '/' }
        // { field: 'monitorItem', label: '监测指标', icon: '&#xe6b7;', value: '/' },
        // { field: '', label: '报警值', icon: '&#xe6b7;', value: '/' },
        // { field: 'ruleContent', label: '报警规则条件', icon: '&#xe6b7;', value: '/' }
      ],
      attachmentPath: '',
      timeList: [],
      code: {
        '传感器报警': 2,
        '视频报警': 1
      }
    }
  },
  computed: {

  },
  async mounted() {
    this.init()
  },
  methods: {
    async baseInfo() {
      this.layout.showAreaLoading(['.AlarmManagementDetail-base-info'])
      const { status, data } = await (this.active === '视频报警' ? aqVideoAlarmDetails : aqMonitorAlarmDetails)({ monitorAlarmId: this.id })
      if (status === 0 && data) {
        this.descList.forEach(v => {
          v.value = data[v.field] ? data[v.field] : v.value
        })
        this.attachmentPath = data.attachmentPath
      }
      this.layout.hideAreaLoading(['.AlarmManagementDetail-base-info'])
    },
    async alarmFlow() {
      this.layout.showAreaLoading(['.alarmFlow-timeline'])
      const { status: flowStatus, data: flowData } = await AqAlarmFlow({
        monitorAlarmId: this.id,
        AlarmType: this.active === '视频报警' ? 1 : 2
      })
      if (flowData && flowStatus === 0) {
        console.log(flowData)
        flowData.forEach((x) => {
          x.activeNames = ['1']
        })
        this.timeList = flowData
      }
      this.layout.hideAreaLoading(['.alarmFlow-timeline'])
    },
    async init() {
      this.baseInfo()
      this.alarmFlow()
    }
  }
}
</script>
<style scoped lang="scss">
</style>
